<template>
    <div style="height: auto">
        <div style="line-height: 30px;margin-bottom: 4px;background-color: #ffffff;font-size: 18px;padding: 10px 30px 10px 30px">
            {{this.projectData.projectName}}
            <el-tag type="info" style="margin-left: 22px" v-if="this.projectData.projectStatus === '未开始'">
                {{this.projectData.projectStatus}}
            </el-tag>
            <el-tag style="margin-left: 22px" v-if="this.projectData.projectStatus === '进行中'">
                {{this.projectData.projectStatus}}
            </el-tag>
            <el-tag style="margin-left: 22px" type="success" v-if="this.projectData.projectStatus === '已完成'">
                {{this.projectData.projectStatus}}
            </el-tag>
            <el-button type="primary" v-if="this.projectData.projectStatus !== '已完成'" @click="dialogFormVisible = true"
                       style="float: right; padding: 5px 15px!important;margin-top: 4px" icon="el-icon-edit">编辑
            </el-button>
            <el-dialog title="编辑项目信息" :visible.sync="dialogFormVisible">
                <el-form :model="projectData">
                    <el-row>
                        <el-col :span="20">
                            <el-form-item label="项目名称">
                                <el-input v-model="projectData.projectName"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="10" style="margin-right: 28px">
                            <el-form-item label="项目负责人">
                                <el-input v-model="projectData.projectManager"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="13">
                            <p>项目状态</p>
                            <el-select v-model="projectData.projectStatus" placeholder="请选择项目所处状态">
                                <el-option label="未开始" value="未开始"></el-option>
                                <el-option label="进行中" value="进行中"></el-option>
                                <el-option label="已完成" value="已完成"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-form-item label="项目工期">
                        <el-col :span="10">
                            <el-date-picker type="date" :placeholder="`开始日期${this.projectData.startTime}`"
                                            v-model="projectData.startTime" style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-col class="line" style="width: 1.16667%">-</el-col>
                        <el-col :span="10">
                            <el-date-picker type="date" :placeholder="`截止日期${this.projectData.finishTime}`"
                                            v-model="projectData.finishTime" style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-row>
                        <span class="demonstration" style="margin-right: 12px;margin-top: 10px!important">项目工期</span>
                        <el-input style="width: 84%;margin-top: 10px!important" v-model="projectData.workTime"
                                  placeholder="人/天"></el-input>
                    </el-row>
                    <el-form-item label="项目描述">
                        <el-input type="textarea" v-model="projectData.description"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="changeInfo">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20" style="height:524px;">
                    <el-row :gutter="20">
                        <el-col :span="8">项目信息</el-col>
                    </el-row>
                    <div class="user-info">
                        <img src="../../assets/img/img.jpg" class="user-avator" alt/>
                        <div class="user-info-cont">
                            <div class="user-info-name">{{this.projectData.projectManager}}</div>
                            <div>项目负责人</div>
                        </div>
                    </div>
                    <div class="mgb20">
                        <p style="font-size: 14px;color: #000;margin-top: 20px;margin-bottom: 20px">项目整体进度：</p>
                        <el-progress :percentage="this.projectData.projectProgress*100" color="#f1e05a"
                                     style="{width: 200px;height: 20px; display: flex;flex-direction: row}"></el-progress>
                    </div>
                    <el-row class="user-info-list" style="margin-top: 14px">
                        <el-col :span="9" style="color: #000">团队成员人数：</el-col>
                        <el-col :span="15">{{this.projectData.memberCount}}</el-col>
                    </el-row>
                    <el-row class="user-info-list">
                        <el-col :span="9" style="color: #000">甲方:</el-col>
                        <el-col :span="15">{{this.projectData.partyA}}</el-col>
                    </el-row>
                    <el-row class="user-info-list">
                        <el-col :span="9" style="color: #000">计划工期：</el-col>
                        <el-col :span="15">{{this.projectData.startTime}}至{{this.projectData.finishTime}}</el-col>
                    </el-row>
                    <el-row class="user-info-list">
                        <el-col :span="9" style="color: #000">项目工期:</el-col>
                        <el-col :span="15">{{this.projectData.workTime}}人/天</el-col>
                    </el-row>
                    <el-row class="user-info-list">
                        <el-col :span="9" style="color: #000">工作项总数:</el-col>
                        <el-col :span="15">{{this.projectData.undone+this.projectData.done+this.projectData.ondoing}}
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" class="mgb20">
                        <p style="font-size: 14px;color: #000;margin-bottom: 20px">工作项详情：</p>
                        <el-col :span="8" style="height: 40px">
                            <el-card style="border: #ffffff" shadow="hover" :body-style="{padding: '0px'}">
                                <div class="grid-content grid-con-3">
                                    <div class="grid-cont-right">
                                        <div class="grid-num">{{this.projectData.undone}}</div>
                                        <div>未开始</div>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card style="border: #ffffff" shadow="hover" :body-style="{padding: '0px'}">
                                <div class="grid-content grid-con-1">
                                    <div class="grid-cont-right">
                                        <div class="grid-num">{{this.projectData.ondoing}}</div>
                                        <div>进行中</div>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card style="border: #ffffff" shadow="hover" :body-style="{padding: '0px'}">
                                <div class="grid-content grid-con-2">
                                    <div class="grid-cont-right">
                                        <div class="grid-num">{{this.projectData.done}}</div>
                                        <div>已完成</div>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="16" style="height:523px;margin-top: 6px;">
                <el-card shadow="hover" style="height:523px">
                    <div slot="header" class="clearfix">
                        <span>项目描述</span>
                    </div>
                    {{this.projectData.description}}
                </el-card>
            </el-col>
        </el-row>

        <el-card shadow="hover" style="margin-bottom: 20px">
            <div slot="header" class="clearfix">
                <span>公告</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="isAddAnnouncement = true">添加
                </el-button>
                <el-dialog
                        title="发布公告"
                        :visible.sync="isAddAnnouncement"
                        width="30%"
                >
                    <el-form :model="postNoticeInfo">
                        <el-form-item label="标题">
                            <el-input v-model="postNoticeInfo.title"></el-input>
                        </el-form-item>
                        <el-form-item label="内容">
                            <el-input type="textarea" aria-placeholder="输入公告内容" v-model="postNoticeInfo.content"></el-input>
                        </el-form-item>
                        <el-switch
                                v-model="postNoticeInfo.isTop"
                                active-text="置顶">
                        </el-switch>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                <el-button @click="isAddAnnouncement = false">取 消</el-button>
                <el-button type="primary" @click="addAnnounce">确 定</el-button>
            </span>
                </el-dialog>
            </div>
            <el-table :show-header="false" :data="todoList" style="width:100%;">
                <el-table-column>
                    <template  slot-scope="scope">
                        <el-badge v-if="scope.row.isTop===true" value="置顶" style="margin-top: 15px" @click="AnnouncementContent = true">
                            <p class="todo-item">{{scope.row.title}}</p>
                        </el-badge>
                        <p v-else @click="AnnouncementContent = true"
                           class="todo-item" style=" margin-top: 15px;">{{scope.row.title}}</p>
                        <el-dialog title="公告内容" :visible.sync="AnnouncementContent">
                            <el-form :model="form">
                                <el-input type="textarea" v-model="scope.row.noticeContent"></el-input>
                            </el-form>
                        </el-dialog>
                    </template>
                </el-table-column>
                <el-table-column width="60">
                    <template slot-scope="scope">
                        <i @click="isUpAnnouncement = true" class="el-icon-edit"></i>
                        <el-dialog
                                title="编辑公告"
                                :visible.sync="isUpAnnouncement"
                                width="30%"
                        >
                            <el-form :model="scope.row">
                                <el-form-item label="标题">
                                    <el-input v-model="scope.row.title"></el-input>
                                </el-form-item>
                                <el-form-item label="内容">
                                    <el-input type="textarea" aria-placeholder="输入公告内容" v-model="scope.row.noticeContent"></el-input>
                                </el-form-item>
                                <el-switch
                                        v-model="scope.row.isTop"
                                        active-text="置顶">
                                </el-switch>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="isUpAnnouncement = false">取 消</el-button>
                                <el-button type="primary" @click="UpAnnounce(scope.row)">确 定</el-button>
                            </span>
                        </el-dialog>
                        <i @click="isDeleteAnnouncement = true" class="el-icon-delete"></i>
                        <el-dialog
                                title="提示"
                                :visible.sync="isDeleteAnnouncement"
                                width="30%"
                        >
                            <span>是否确认删除该公告？</span>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="isDeleteAnnouncement = false">取 消</el-button>
                                <el-button type="primary" @click="delNotice(scope.row.noticeId)">确 定</el-button>
                            </span>
                        </el-dialog>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <div style="background-color: #ffffff;padding: 40px;margin-bottom: 20px">
            <p style="font-size: 15px; margin-bottom: 14px">当前阶段 <span style="font-size: 14px; color: #999999">（点选进度条更改迭代阶段）</span>
            </p>
            <el-steps :active="1" finish-status="success">
                <el-step @click.native="on_click(0)" :status="finish" title="未开始"
                         :description="`迭代开始日期${this.projectData.startTime}`"></el-step>
                <el-step @click.native="on_click(1)" :status="this.changeState >= 1 ? returnBlue():'wait'" title="进行中"
                         :description="`当前进度${this.nowData}`"></el-step>
                <el-step @click.native="on_click(2)" :status="this.changeState === 2 ? 'success':'wait'" title="已完成"
                         :description="`预计结束日期${this.projectData.finishTime}`"></el-step>
            </el-steps>
        </div>
            <el-tabs v-model="activeName" class="container" style="padding: 20px!important;height: auto" @tab-click="handleGantt">
                <el-tab-pane label="总体甘特图" name="first">
                    <gantt class="left-container" :tasks="taskssummarize" @task-updated="logTaskUpdate" :showWitch="ganttShowone" @changeSort="changeSort" v-if="ganttShowone" @task-selected="selectTask" @link-updated="logLinkUpdate"></gantt>
                </el-tab-pane>
                <el-tab-pane label="工作项甘特图" name="second" >
                    <gantt class="left-container" :tasks="tasksitem" @task-updated="logTaskUpdate" :showWitch="ganttShowone" v-if="ganttShowtwo" @task-selected="selectTask" @link-updated="logLinkUpdate"></gantt>
                </el-tab-pane>
            </el-tabs>
        </div>
</template>

<script>
  import { notice, noticeRemove, noticeShow,noticeChange } from '../../api/project/notice';
  import Schart from 'vue-schart';
  import Gantt from '../common/Gantt'
  import {Message} from 'element-ui'
  import bus from '../common/bus';
  export default {
    data() {
      return {
        isDeleteAnnouncement:false,
        isUpAnnouncement:false,
        AnnouncementContent:false,
        nowData:'',
        changeState:0,
        projectData:[],
        dialogFormVisible:false,
        ganttShowone:false,
        ganttShowtwo: false,
        isAddAnnouncement:false,
        selectedTask: null,
        name: localStorage.getItem('ms_username'),
        activeName: 'first',
        form:[
          {
            delivery:'',
            desc:''
          }
          ],
        todoList: [],
        postNoticeInfo: {
          content: "",
          title: "",
          isTop: false
        },
        taskssummarize: {
          data: [ ],
          links: [ ]
        },
        tasksitem: {
          data: [ ],
          links: [
            // {id: 1, source: 1, target: 2, type: '0'}
          ]
        },
      };
    },
    components: {
      Schart,
      "gantt":Gantt,
    },
    watch: {},
    computed: {
      role() {
        return this.name === 'admin' ? '项目负责人' : '项目成员';
      }
    },
    created() {
        this.handleListener();
        this.changeDate();
    },
    activated() {
        this.handleListener();
    },
    deactivated() {
        window.removeEventListener('resize', this.renderChart);
        bus.$off('collapse', this.handleBus);
    },
    methods: {
        //添加公告
      addAnnounce(){
        let info = this.postNoticeInfo;
        notice({
          isTop: Number(info.isTop),
          noticeContent: info.content,
          noticeProject: this.$route.query.projectId,
          noticeTitle: info.title
        }).then(res => {
          this.$message.success({
            title: "发送成功",
            duration: 1000,
            onClose: location.reload()
          })
        })
      },
      //编辑公告
      UpAnnounce(e){
        console.log(e);
        this.$http.put('/notice/change',{
          "isTop": Number(e.isTop),
          "noticeContent": e.noticeContent,
          "noticeId": e.noticeId,
          "noticeTitle": e.title
        }).then( res =>{
          this.$message.success({
            title: "发送成功",
            duration: 1000,
            onClose: location.reload()
          });
        })
      },
      // 删除公告请求
      delNotice(e){
        noticeRemove({noticeId: e}).then(res => {
          this.$message.success({
            title: "发送成功",
            duration: 1000,
            onClose: location.reload()
          })
        })
      },
      returnBlue(){return(this.changeState === 1?'finish':'success')},
      //分开展示两个甘特图
      handleGantt(tab,event) {
        if(tab.label==='总体甘特图'){
          this.ganttShowtwo = false;
          this.ganttShowone = true;
        }
        if(tab.label==='工作项甘特图'){
          this.ganttShowone = false;
          this.ganttShowtwo = true;
        }
      },
      //日期格式统一化
      dateChange(data){
        let dataMounth,dataDate;
        if (data.getMonth()<10){
          dataMounth=data.getMonth()+1;
          dataMounth="0"+dataMounth
        }else {
          dataMounth=data.getMonth()
        }
        if (data.getDate()<10){
          dataDate="0"+data.getDate()
        }else {
          dataDate=data.getDate()
        }
        data =data.getFullYear()+"-"+dataMounth+'-'+dataDate;
        return data;
      },
      //更改项目信息
      changeInfo(){
        if(this.projectData.startTime.toString().length>15 ){
          this.projectData.startTime=this.dateChange(this.projectData.startTime);
        }
        if(this.projectData.finishTime.toString().length>15 ){
          this.projectData.finishTime=this.dateChange(this.projectData.finishTime);
        }
        let projectStatusNow = 0;
        let projectStartTime = this.projectData.startTime+'T03:48:05.929Z';
        let projectFinishTime = this.projectData.finishTime+'T03:48:05.929Z';
        if (this.projectData.projectStatus==='未开始'){
          projectStatusNow=0
        }else if(this.projectData.projectStatus==='进行中'){
          projectStatusNow=1
        }else {
          projectStatusNow=2
        }
        this.$http.put('/project/change',{
          projectId:this.projectData.projectId,
          description:this.projectData.description,
          finishTime:projectFinishTime,
          projectManager:this.projectData.projectManager,
          projectName:this.projectData.projectName,
          projectStatus:projectStatusNow ,
          startTime:projectStartTime,
          workTime:this.projectData.workTime,
        }).then( res => {
          console.log(this.projectData.projectStatus);
          this.dialogFormVisible = false;
          Message.success('项目信息已修改');
          this.getData()
        })

      },
      //修改项目状态
      on_click(e){
        if (this.changeState !== 2){
          this.changeState =e;
          let putData =this.nowData+'T16:00:00.000Z';
          console.log(putData);
          if (this.changeState ===2){
            this.$http.put('/project/change/one',{
              projectId:this.projectData.projectId,
              projectStatus:this.changeState,
              finishTime:putData
            }).then( res => {
              Message.success('项目状态修改成功');
              this.projectData.finishTime = this.nowData;
              this.getData()
            });
          }else{
            this.$http.put('/project/change/one',{
              projectId:this.projectData.projectId,
              projectStatus:this.changeState,
            }).then( res => {
              Message.success('项目状态修改成功');
              this.getData()
            });
          }
        }
      },
      changeSort(task){
        console.log('ss');
        let arr = this.taskssummarize.data;
        this.taskssummarize.data[task.tindex-1].id=task.id;
        this.taskssummarize.data[task.id-1].id=task.tindex;
        console.log(arr);
        let new_arr = arr.map(obj => {
            return {"planId":obj.planId,"sort":obj.id};
        } );
        this.$http.put('/plan/change/order',  new_arr).then( res => {
          Message.success('重新排序')
        })
      },
      logTaskUpdate (id, mode, task) {
        switch (mode) {
          //删除
          case('delete'):
            if (JSON.stringify(task).indexOf('planId') !== -1){
              this.$http.delete('/plan/remove',{
                params:{
                  planId:task.planId
                }
              }).then( res => {
                Message.success('删除成功')
              })
            } else {
              this.$http.delete('/mission/remove',{
                params:{
                  missionId:task.missionId
                }
              }).then( res => {
                Message.success('删除成功')
              })
            }
            break;
          //更新
          case ('update'):
            if (JSON.stringify(task).indexOf('planId') !== -1){
              console.log(task);
                this.$http.put('/plan/change',{
                  progress:task.progress,
                  planEnd: task.end_date+"T09:50:09.052Z",
                  planId: task.planId,
                  planName: task.text,
                  planStart: task.start_date+"T09:50:09.052Z"
              }).then( res => {
                  Message.success('更新成功')
                })
            } else {
              console.log(task);
              this.$http.put('/mission/change',{
                progress:task.progress,
                missionId: task.missionId,
                missionTitle: task.text,
                startTime:task.start_date+"T09:50:09.052Z",
                finishTime: task.end_date+"T09:50:09.052Z",
                missionManager: task.managerName,
              }).then( res => {
                Message.success('更新成功')
              })
            }
            break;
          //创建
          case ('create'):
            if (this.ganttShowone){
              console.log(task);
              this.$http.post('/plan/post',{
                planEnd:task.end_date +"T05:33:30.437Z",
                planName:task.text ,
                planStart:task.start_date +"T05:33:30.437Z",
                progress:0,
                projectId:this.projectData.projectId,
                sort: this.taskssummarize.data.length+1
              }).then( res => {
                Message.success('新建成功')
              })
            } else {
              console.log(task);
              this.$http.post('/mission/post',{
                finishTime: task.end_date+"T05:30:19.119Z",
                missionContent:'',
                missionManager:this.projectData.projectManager,
                missionPriority:0,
                missionProject:this.projectData.projectId,
                missionTitle:task.text,
                missionType:1,
                startTime: task.start_date+"T05:30:19.119Z"
              }).then( res => {
                Message.success('新建成功')
              })
            }
            break;
        }
      },

      logLinkUpdate (id, mode, link) {
        console.log(id);
        console.log(mode);
        console.log(link);
      },
      //获取项目详细信息
      async getData(){
        this.$http.get('/project/show/one',{
          params:{projectId:this.$router.currentRoute.query.projectId}
        }).then( res=> {
          this.projectData=res.data;
          if (this.projectData.projectStatus === '未开始'){
            this.changeState = 0
          }else if (this.projectData.projectStatus === '进行中'){
            this.changeState = 1
          }else {
            this.changeState = 2
          }
        }).then(res =>{
          this.$http.get('/notice/show',{
            params:{
              projectId:this.projectData.projectId,
            }
          }).then( res => {
            console.log(res);
            this.todoList = JSON.parse(JSON.stringify(res.data)
              .replace(/noticeTitle/g,"title"));
            this.todoList.map((item,index)=>{
              if (item.isTop===1){
                item.isTop = true;
                this.itemtoArraytop(this.todoList,index);
              }else {
                item.isTop = false
              }
            })
          })
        });
      },
      itemtoArraytop(Arr,index){
        var temp = Arr[index];
        if(index == 0){
          return Arr;
        }
        for (var i = 0; i < Arr.length; i++) {
          if (Arr[i] === Arr[index]) {
            //从第i个元素开始移除，1是长度，只移除一个元素。
            Arr.splice(i, 1);
            break;
          }
        }
        //unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
        Arr.unshift(temp);
        return Arr;
      },
      async getGanttSumData(){
        // 项目总体甘特图
        await this.$http.get('/plan/show',{
          params:{projectId:this.$router.currentRoute.query.projectId}
        }).then( res => {
          let planList =res.data;
          planList.forEach((item,index) => {
            item.planStart = item.planStart[0]+'-'+item.planStart[1]+'-'+item.planStart[2];
            item.planIdshow=index+1;
            item.projectId = this.$router.currentRoute.query.projectId
          });
          this.taskssummarize.data = JSON.parse(JSON.stringify(planList)
            .replace(/planIdshow/g,"id")
            .replace(/planName/g,"text")
            .replace(/planStart/g,"start_date"));
        });
        console.log(this.taskssummarize.data)
      },
      async getGanttWorkData(){
        //工作项甘特图
         await this.$http.get('/mission/Ganttchart',{
          headers:{
            'access-token': window.localStorage.getItem('token')
          },
          params:{projectId:this.$router.currentRoute.query.projectId}
        }).then( res => {
          let workItemsList =res.data;
          workItemsList.forEach((item,index) => {
            item.startTime = item.startTime[0]+'-'+item.startTime[1]+'-'+item.startTime[2];
            item.missionIdshow=index+1;
            item.projectId = this.$router.currentRoute.query.projectId
          });
          this.tasksitem.data = JSON.parse(JSON.stringify(workItemsList)
            .replace(/missionIdshow/g,"id")
            .replace(/missionTitle/g,"text")
            .replace(/startTime/g,"start_date")
            .replace(/missionProgress/g,"progress"));
        });
        console.log(this.tasksitem.data);
        this.ganttShowone=true;
      },
    },
      selectTask (task){
        this.selectedTask = task;
      },
      changeDate() {
        const now = new Date().getTime();
        this.data.forEach((item, index) => {
          const date = new Date(now - (6 - index) * 86400000);
          item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
        });
      },
      handleListener() {
          bus.$on('collapse', this.handleBus);
          // 调用renderChart方法对图表进行重新渲染
          window.addEventListener('resize', this.renderChart);
      },
      handleBus(msg) {
          setTimeout(() => {
              this.renderChart();
          }, 200);
      },
      renderChart() {
          this.$refs.bar.renderChart();
          this.$refs.line.renderChart();
      },
    mounted(){
      let data=new Date();
      this.nowData = this.dateChange(data);
      this.getData();
      this.getGanttSumData();
      this.getGanttWorkData();
    },
  };

</script>
<style scoped lang="less">
    @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
    .gantt_tree_icon.gantt_blank{
        width: 30px!important;
    }
    .el-progress-bar {
        /*width: 40% !important;*/
        width: 30px !important;
    }

    .gantt-selected-info {
        border-bottom: 1px solid #cecece;
        box-sizing: border-box;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        height: 50%;
        line-height: 28px;
        padding: 10px;
    }

    .el-progress-bar__outer {
        width: auto;
    }

    .gantt-selected-info h2 {
        border-bottom: 1px solid #cecece;
    }

    .select-task-prompt h2 {
        color: #d9d9d9;
    }

    .container {
        height: 100%;
        width: 97%;
    }

    .left-container {
        margin-top: 10px;
        overflow: hidden;
        position: relative;
        height: 100%;
    }

    .right-container {
        border-right: 1px solid #cecece;
        float: right;
        height: 100%;
        width: 340px;
        box-shadow: 0 0 5px 2px #aaa;
        position: relative;
        z-index: 2;
    }

    .gantt-messages {
        list-style-type: none;
        height: 50%;
        margin: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding-left: 5px;
    }

    .gantt-messages > .gantt-message {
        background-color: #f4f4f4;
        box-shadow: inset 5px 0 #d69000;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        font-size: 14px;
        margin: 5px 0;
        padding: 8px 0 8px 10px;
    }

    .el-row {
        margin-bottom: 10px;
    }

    .grid-content {
        font-size: 16px;
        display: flex;
        align-items: center;
        height: 35px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #999;
    }

    .grid-num {
        font-size: 14px;
        font-weight: bold;
    }

    .grid-con-icon {
        font-size: 40px;
        width: 40px;
        height: 40px;
        text-align: center;
        color: #fff;
    }

    .grid-con-1 .grid-num {
        color: #FFD700
    }

    .grid-con-2 .grid-num {
        color: rgb(100, 213, 114);
    }

    .grid-con-3 .grid-num {
        color: rgb(45, 140, 240);
    }

    .user-info {
        display: flex;
        align-items: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .user-avator {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .user-info-cont {
        padding-left: 20px;
        flex: 1;
        font-size: 14px;
        color: #999;
    }

    .user-info-cont div:first-child {
        font-size: 15px;
        color: #222;
    }

    .user-info-list {
        font-size: 14px;
        color: #999;
        line-height: 25px;
    }

    .mgb20 {
        margin-left: 0px !important;
        margin-right: 0px !important;
        margin-top: 6px;
        margin-bottom: 8px;
    }

    .todo-item {
        font-size: 14px;
        margin-right: 30px;
    }

    .todo-item-del {
        text-decoration: line-through;
        color: #999;
    }

    .schart {
        width: 100%;
        height: 300px;
    }
</style>
